<template>
	<view class="feedback_form-tab">
		<text
			@click="barTap(index)" 
			v-for="(item,index) in feedbackItem" 
			:key="index" 
			:class='["feedback_form-item",activeIndex==index ? "active": ""]'
		>{{item.title}}</text>
	</view>
</template>

<script>
	export default {
		props:{
			activeIndex:{
				type:Number,
				default: 0
			},
	        feedbackItem:{
				type:Array,
				default:function(){
					return {}
				}
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			barTap(activeIndex){
			    this.$emit('barTap',activeIndex)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feedback {
		&_form {
			background-color: #fff;
			border: 1px solid #d8d8d8;
			margin: 0 auto;
			padding: 0 20upx;
			&-wrap {
				margin: 0 auto;
				border: 1px solid #d8d8d8;
			}
			&-tab {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 24upx;
				// border-bottom: 1px solid #333;
				margin: 0 20upx;
				padding: 20upx 0 0;
				flex-wrap: wrap;
			}
			&-item {
				margin-top: 10upx;
				padding: 10upx 20upx;
				border:1px solid #d8d8d8;
				border-radius: 20upx;
				&.active {
					background-color: #377cfd;
					color: #fff;
					border:1px solid #377cfd;
				}
			}
		}
	}
</style>
